<template>
  <!-- 底部 其他网站个人链接 -->
  <div id="bottom">
    <van-row type="flex" justify="space-around">
      <van-col class="reveal-bottom" span="6" v-for="(item, index) in appIcon" :key="index">
        <van-icon :name="item.icon" @click="linkTo(item.path)" size="30px" />
      </van-col>
    </van-row>
  </div>
</template>

<script>
  export default {
    name: "BottomShare",
    data() {
      return {
        appIcon: [{
            icon: require("@/assets/icon_app/bilibili-line.png"),
            path: "https://space.bilibili.com/1366266900?spm_id_from=333.788.0.0"
          },
          {
            icon: require("@/assets/icon_app/github.png"),
            path: "https://github.com/Zyqqun"
          },
          {
            icon: require("@/assets/icon_app/weibo.png"),
            path: "https://weibo.com/u/6747289518"
          },
        ],
      };
    },
    methods: {
      linkTo(path) {
        // 新页面打开对应网页链接
        window.open(path, '_blank')
      }
    },
    mounted() {
      // 滚动出现动画效果
      this.$scrollReveal.reveal('.reveal-bottom', {
        duration: 1000,
        delay: 300,
        origin: 'bottom',
        // 回滚的时候是否再次触发动画
        reset: true,
        // 在移动端是否使用动画
        mobile: true,
        distance: '10px',
        opacity: 0.001,
        easing: 'linear',
        scale: 0.9,
      })
    }
  };
</script>

<style scoped>
  #bottom {

    margin: 10px;
    text-align: center;
  }
</style>